<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorate="~{layout/storelayout}">
<head>
    <meta charset="UTF-8">
    <title>修改会员信息</title>
</head>
<body>
<!--  修改会员信息  -->
    <div layout:fragment="content">
        <form th:action="@{/memberInFo/upd}" method="post" th:each="user:${list}" class="layui-form">
            <div class="layui-input-inline">

                <!-- 卡号 -->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label layui-bg-white">卡号：</label>
                        <div class="layui-input-inline">
                            <input type="text" id="cardId" name="cardId" required  lay-verify="required" th:value="${user.cardId}" readonly autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <!-- 用户名 -->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label layui-bg-white">用户名：</label>
                        <div class="layui-input-inline">
                            <input type="text" id="name" name="name" required  lay-verify="required" th:value="${user.name}" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <!-- 手机号 -->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label layui-bg-white">手机号：</label>
                        <div class="layui-input-inline">
                            <input type="text" id="iphone" name="iphone" required  lay-verify="required" th:value="${user.iphone}" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <!-- 会员生日-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label layui-bg-white">会员生日：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="birthday" required  lay-verify="required" th:value="${user.birthday}" id="date1" autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                </div>

<!--                卡状态-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label layui-bg-white">卡状态：</label>
                        <div class="layui-input-inline">
                            <select name="state">
                                <option value="使用中">使用中</option>
                                <option value="挂失">挂失</option>
                            </select>
                        </div>
                    </div>
                </div>




                <div class="layui-input-inline login-btn" style="width: 85%">
                    <button type="submit" lay-submit lay-filter="sub" class="layui-btn layui-btn-primary">更改</button>
                </div>

            </div>
        </form>

        <script src="/static/layui/layui.js"></script>
        <script type="text/javascript">
            layui.use(['form','jquery','layer','laydate'], function () {
                var form = layui.form;
                var laydate = layui.laydate;
                var $ = layui.jquery;
                var layer = layui.layer;

                //日期
                laydate.render({
                    elem: '#date'
                });
                laydate.render({
                    elem: '#date1'
                });
                laydate.render({
                    elem: '#date2'
                });

                // 为手机号添加正则验证
                $('#iphone').blur(function () {
                    var iph = /^[1][3,4,5,6,7,8][0-9]{9}$/;
                    if (!($('#iphone').val().match(iph))) {
                        //layer.msg('请输入合法密码');
                        $('#wri').removeAttr('hidden');
                        $('#rig').attr('hidden', 'hidden');
                        layer.msg('请输入11位有效手机号');
                    } else {
                        $('#wri').removeAttr('hidden');
                        $('#rig').attr('hidden', 'hidden');
                    }
                });

                //添加表单更改事件
                $('#name').change(function() {
                    var user = $(this).val();
                    //alert(user);
                    $.ajax({
                        url:'/memberInFo/selectMemberName',
                        type:'GET',
                        dataType:'json',
                        data:{user:user},
                        //验证用户名是否可用
                        success:function(data){
                            // alert(data);
                            if (data == null) {
                                $('#ri').removeAttr('hidden');
                                $('#wr').attr('hidden','hidden');

                            } else if(data == user){
                                layer.msg('当前用户名，没有修改! ')
                            } else {
                                $('#wr').removeAttr('hidden');
                                $('#ri').attr('hidden','hidden');
                                layer.msg('当前用户名已被占用! ')

                            }
                        }
                    })

                });
            })
        </script>
    </div>
</body>
</html>